<template>
    <el-card>
        <el-tabs>
            <div class="app-container">
                <!-- 添加或修改商品基础对话框 -->
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-form-item label="商品类型" v-if="false">
                        <el-select v-model="form.goodsType" >
                            <el-option label="终端商城" value="0"/>
                            <el-option label="兑换商品" value="1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌" prop="brandId">
                        <el-select v-model="form.brandId" placeholder="请选择商品品牌">
                            <el-option v-for="(item, index) in listTTerminalBrandInfo" :key="index" :label="item.brand"
                                       :value="item.id" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额类型" prop="goodsStatus" v-if="this.form.goodsType == '0'? false : true" > <!--v-if="form.goodsType == '0'? false : true " 隐藏-->
                        <el-select v-model="form.goodsStatus" placeholder="请选择类型">
                            <el-option v-for="(item, index) in queryParams"
                                       :key="index"
                                       :label="item.value"
                                       :value="item.code"
                                       :disabled="item.disabled"
                            />
                        </el-select>
                    </el-form-item>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="商品名称" prop="goodsName">
                                <el-input v-model="form.goodsName" placeholder="请输入商品名称"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="购买金额" prop="amount">
                                <el-input v-model="form.amount" placeholder="请输入购买金额">
                                    <template slot="append">{{form.exchangeUnit}}</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="商品排序" prop="sort">
                                <el-input v-model="form.sort" placeholder="请输入商品排序"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品单位" prop="unit">
                                <el-input v-model="form.unit" placeholder="请输入商品单位"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="商品状态">
                                <el-radio-group v-model="form.isValid">
                                    <el-radio label="0">正常</el-radio>
                                    <el-radio label="1">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否热门推荐">
                                <el-radio-group v-model="form.isPopular">
                                    <el-radio label="1">非热门</el-radio>
                                    <el-radio label="0">热门</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="商品主图片" prop="goodsImg">
                        <imageUpload v-model="form.goodsImg"/>
                    </el-form-item>
                    <el-form-item label="商品轮播图">
                        <imageUpload :limit="6" v-model="form.goodsImgS"/>
                    </el-form-item>
                    <el-form-item label="文字介绍" prop="goodsDescribe">
                        <el-input v-model="form.goodsDescribe" type="textarea" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="产品说明" prop="goodsExplain">
                        <editor v-model="form.goodsExplain" :min-height="192"/>
                    </el-form-item>
                </el-form>
                <el-form label-width="100px">
                    <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
                        <el-button type="primary" @click="submitForm()">提交</el-button>
                        <el-button @click="close()">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-tabs>
    </el-card>
</template>

<script>
    import {addTTerminalGoodsInfo, getTTerminalGoodsInfo, listTTerminalBrandInfo, queryGoodsStatus, updateTTerminalGoodsInfo} from "@/api/pos/TTerminalGoodsInfo";

    export default {
        name: "addTerminal",
        data() {
            return {
                open: true,
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    brandId: [{
                        required: true,
                        message: '请选择品牌',
                    }],
                    goodsName: [{
                        required: true,
                        message: '请输入商品名称',
                    }],
                    goodsImg: [{
                        required: true,
                        message: '请选择商品图片',
                    }],

                    amount: [{
                        required: true,
                        message: '请输入商品价格',
                    }],
                    unit: [{
                        required: true,
                        message: '请输入商品单位',
                    }],
                },
                listTTerminalBrandInfo: {},
                queryParams: {}
            }
        },
        created() {
            this.reset();
            this.getList();
            queryGoodsStatus().then(response => {
                this.queryParams = response;
            });
            listTTerminalBrandInfo().then(response => {
                this.listTTerminalBrandInfo = response;
            });

        },
        methods: {
            getList() {
                const id = this.$route.query && this.$route.query.id;
                if (id != null) {
                    getTTerminalGoodsInfo(id).then(response => {
                        this.form = response.data;
                    });
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    brandId: null,
                    goodsType: "0",
                    goodsStatus: "10",
                    goodsName: null,
                    amount: null,
                    deliveryFee: null,
                    unit: null,
                    sort: null,
                    isValid: "0",
                    goodsDescribe: null,
                    createTime: null,
                    conversionExplain: null,
                    goodsExplain: null,
                    isPopular: "1",
                    goodsImgS: null,
                    exchangeUnit:"元",
                };
                this.resetForm("form");
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateTTerminalGoodsInfo(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.close();
                            });
                        } else {
                            addTTerminalGoodsInfo(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.close();
                            });
                        }
                    }
                });
            },
            /** 关闭按钮 */
            close() {
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.push({path: "/1/TTerminalGoodsInfo/terminal", query: {t: Date.now(), pageNum: this.$route.query.pageNum}})
            },

        },
    }
</script>

